<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="落地页">
							<cl-select v-model="search.id_ad" filterable placeholder="请选择">
								<el-option label="全部" value="" />
								<el-option
									v-for="item in adplatList"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>

						<cl-filter label="客服">
							<cl-select v-model="search.user_id" placeholder="请选择" filterable>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in operateList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="加微方式">
							<cl-select
								v-model="search.contact_type"
								filterable
								placeholder="请选择"
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in contactTypeList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="类型">
							<cl-select
								v-model="search.type"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option label="落地页" :value="1" />
								<el-option label="城市" :value="2" />
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:columns="initColumns"
						:print="printParams"
						v-model="table.columns"
						@export-file="exportExcel"
					/>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table id="landReportSupplier" v-bind="table">
				<cl-empty slot="empty" />
				<template #column-opt="{ scope: { row } }">
					<el-button type="primary" @click="summary(row)"> 汇总 </el-button>
				</template>
			</cl-table>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { exportExcel } from "@/utils/excel";
import constant from "@/constant";

export default {
	name: "WideLandingReportSupplier",
	inject: ["parent"],
	data() {
		return {
			contactTypeList: constant.CONTACT_TYPE,
			printParams: {
				id: "landReportSupplier",
				popTitle: "账号报表"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries
				}
			},
			initColumns: [
				{ type: "index", label: "#", width: 50, disable: true, fixed: true },
				{
					label: "广告账户ID",
					prop: "id_supplier",
					minWidth: 150,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "加微类型",
					prop: "contact_type_name",
					width: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "加微号",
					prop: "contact_value",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{
					label: "客服",
					prop: "user_name",
					minWidth: 100,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "点击数", prop: "statistics_num", width: 100 },
				{ label: "行为数", prop: "behavior_num", width: 100 },
				{
					label: "行为率",
					prop: "behavior_rate",
					width: 100,
					formatter: row => `${row.behavior_rate}%`
				},
				{ label: "加微数", prop: "number", width: 100 },
				{
					label: "加微率",
					prop: "add_wei_rate",
					width: 100,
					formatter: row => `${row.add_wei_rate}%`
				},
				{ label: "预约数", prop: "deposit_num", width: 100 },
				{
					label: "到店业绩",
					prop: "achieve_num",
					width: 100,
					formatter: row => `￥${row.achieve_num}`
				},
				{ label: "最近加微日期", prop: "addtime", width: 150 },
				{ label: "操作", prop: "opt", width: 100, disable: true, fixed: "right" }
			],
			search: {
				biz_id: "", //分公司id
				user_id: "", // 推广人员
				id_ad: "",
				date: [
					dayjs()
						// .startOf("month")
						.format("YYYY-MM-DD"),
					dayjs()
						// .endOf("month")
						.format("YYYY-MM-DD")
				],
				begin_time: "", //开始时间
				end_time: "", //结束时间
				type: "",
				contact_type: ""
			},
			operateList: [],
			// 落地页
			adplatList: []
		};
	},
	created() {
		const { initColumns } = this;
		this.search.biz_id = this.getCurrBiz();
		this.changeBiz();
		this.table.columns = initColumns;
		this.getAdplatformList();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "adreport"
					},
					pagination: {
						size: "pagesize"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		// 导出
		exportExcel() {
			exportExcel("#landReportSupplier");
		},
		// 汇总
		summary(row = {}) {
			const { biz_id } = this.search;
			this.parent.openStatistics({ ...row, biz_id });
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let ratioColumns = ["behavior_rate", "add_wei_rate"];
			let sumColumns = [
				"statistics_num",
				"behavior_num",
				"behavior_rate",
				"number",
				"add_wei_rate",
				"deposit_num",
				"achieve_num"
			];
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				if (!sumColumns.includes(column.property)) return "";
				const values = data.map(item => Number(item[column.property]));
				let sum = values.reduce((prev, curr) => {
					const value = Number(curr);
					if (!isNaN(value)) {
						return prev + curr;
					}
					return prev;
				}, 0);
				let isRatio = ratioColumns.includes(column.property);
				if (column.property == "achieve_num") {
					return "￥" + this.toFixed(sum);
				}
				if (isRatio) {
					return this.toFixed(sum) + "%";
				}
				return this.toFixed(sum);
			});
		},
		initData() {
			this.changeBiz();
			this.getAdplatformList();
		},
		// 事业部切换
		changeBiz() {
			this.search.user_id = "";
			this.getOperate();
		},

		// 获取运营人
		async getOperate() {
			const { biz_id } = this.search;
			this.operateList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				post: 4,
				biz_id
			});
			this.operateList = data;
		},
		// 获取落地页
		async getAdplatformList() {
			this.adplatList = [];
			const data = await this.$service.ad.adplatform();
			this.adplatList = data;
		}
	}
};
</script>

<style lang="scss" scoped></style>
